<template>
  <div class="user">
    <van-nav-bar title="我的优惠券" left-arrow @click-left="backUp"></van-nav-bar>
    <van-tabs v-model="active">
      <van-tab title="未使用">
        <ul class="coupon-list">
          <li class="coupon-item">
            <div class="left">
              <div>
                <span>￥</span>&nbsp;
                <span>10</span>
                <span>店铺优惠券</span>
              </div>
              <p class="tip">新用户可用</p>
              <p class="time">有效期2019-09-06至2019-10-06</p>
            </div>
            <div class="right"></div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="已使用">内容 2</van-tab>
      <van-tab title="已过期"></van-tab>
    </van-tabs>
  </div>
</template>
<script>
const avatar = require("@/assets/logo.png");
import { Tabs, Tab } from "vant";
export default {
  name: "coupon",
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab
  },
  data() {
    return {
      active: 2
    };
  },
  methods: {
    goto() {
      this.$router.push("/coupon");
    },
    backUp() {
      this.$router.go(-1);
    }
  },
  mounted() {}
};
</script>
<style lang="less" scoped>
@import "../../assets/style/common.less";
.coupon {
  .coupon-list {
    .coupon-item {
      margin-top: 10px;
      .left {
        padding-left: 20px;
        div {
        }
        .tip {
          font-size: 12px;
          font-weight: 500;
          color: #fba86f;
          line-height: 11px;
        }
        .time {
          font-size: 12px;
          font-weight: 300;
          color: #999;
          line-height: 11px;
        }
      }
    }
  }
}
.user {
  // border:1px solid #f00;
  background-color: @borderColor;
  min-height: 100vh;

  .user-top {
    .user-nav {
      // border:1px solid #0f0;
      padding-top: 20px;
      text-align: right;
      // line-height: 70px;
      .van-icon {
        margin-right: 20px;
        color: @bgColor;
        .font-dpr(26px);
      }
    }
  }
}
</style>
